<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ve</title>
	</head>
	<body>
		<h1>vue3 记录</h1>
		<div id="wp">
			{{msg}}
		</div>
		<div id="wps">
			{{msg}}
			<input type="text" name="" id="" value="" v-model="msg" />
			<div>
				<button type="button" @click="revmesg">反转</button>
			</div>
			<hr>
			<div v-for="(item,index) in list" :key="index">
				{{item}}
			</div>
			<div v-if="Math.random() > 0.5">
				随机数大于0.5
			</div>
			<div v-else>
				随机数小于0.5
			</div>
			<love></love>
			<hr>
			<!-- <button type="button" @click="count++">点了{{coun}}次</button> -->
			<wp-count title="love"></wp-count>
			<wp-count></wp-count>
			<!-- <la></la> -->
		</div>
		<!-- 
		<script crossorigin="anonymous"
			integrity="sha512-REb0S2epbS0XtS28ifNa1haxmTZigXjB+Tx5IHCvXZndWB2RL431Vt1qONzFoe0dPwA8WGow+xxkQwhVr44nRg=="
			src="https://lib.baomitu.com/vue/3.0.2/vue.global.js"></script> -->
		<!-- <script src="vue.js" type="text/javascript" charset="utf-8"></script> -->
		<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js" type="text/javascript" charset="utf-8">
		</script>
		<script type="text/javascript">
			const me = {
				data() {
					return {
						msg: 'love'
					}
				}
			}
			const love = {
				data() {
					return {
						msg: 'love wp!',
						list: [1, 2, 3, 4, 5, 6]
					}
				},
				methods: {
					revmesg() {
						this.msg = this.msg.split('').reverse().join('')
					}
				}
			}

			var la = {
				template: `<h3>la</h3>`
			}

			const app = Vue.createApp(love);

			app.component('love', {
				template: '<h1>love love</h1>'
			})

			app.component('wp-count', {
				data() {
					return {
						count: 6
					}
				},
				// props:['title'],
				props: {
					title: {
						type: String,
						default: '36'
					}
				},
				template: `<button @click="count++">点了<span style="color:red;">{{title}}{{ count }}</span>次</button>`
			})

			// app.components('la':la)

			app.mount('#wps');

			Vue.createApp(me).mount('#wp');
			// Vue.createApp(love).mount('#wps');
		</script>
	</body>
</html>
